<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
            <el-button
                    size="small"
                    @click="showForm('add')"
                    type="primary">
              新增未成交原因
            </el-button>
    </div>

      <!--数据列表-->
      <div class="table-container" >
        <el-table
                v-loading="listLoading"
                :data="tableData"
                border
                style="width: 100%; margin-top: 20px">
          <el-table-column  align="center" label="未成交原因" prop="reasonValue"></el-table-column>
          <el-table-column  align="center" label="排序" prop="sortOrder" width="100px"></el-table-column>
          <el-table-column
                  label="对策">
            <template slot-scope="scope">
                <div>{{scope.row.children | fiflist}}</div>
            </template>
          </el-table-column>
          <el-table-column
                  label="操作"
                  align="center">
            <template slot-scope="scope">
              <el-button
                      type="text"
                      size="mini"
                      @click="showForm2(scope.row)">对策管理
              </el-button>
              <el-button
                      type="text"
                      size="mini"
                      @click="showForm('edit',scope.row)">编辑
              </el-button>
              <el-button
                      type="text"
                      size="mini"
                      @click="delItem(scope.row,'reason')">{{scope.row.isShow == 1 ? '禁用' : '启用'}}
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>



    <!--新增/编辑原因-->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogType == 'add' ? '新增原因' : '编辑原因'"
      :beforeClose="beforeClose"
      :visible.sync="dialogVisible"
      width="600px">
      <el-form :model="form" size="mini" label-width="140px" :rules="rules" ref="form">
        <el-form-item label="未成交原因：" prop="customerId">
          <el-input v-model="form.reasonValue"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="customerId">
          <el-input v-model="form.sortOrder" style="width:120px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading" >确定</el-button>
      </span>
    </el-dialog>

    <!--新增编辑对策-->
    <el-dialog
      :beforeClose="handleClose3"
      :close-on-click-modal="false"
      :title="dialogType2 == 'add' ? '新增对策' : '编辑对策'"
      :visible.sync="dialogVisible3"
      width="600px">
      <el-form :model="form3" size="mini" label-width="120px" ref="form3" :rules="rules3">
          <el-form-item label="未成交对策：" prop="solutionValue">
            <el-input v-model="form3.solutionValue"></el-input>
          </el-form-item>
          <el-form-item label="排序：">
            <el-input v-model="form3.sortOrder" style="width:120px"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
      </span>
    </el-dialog>

    <!--对策管理-->
    <el-dialog
            :close-on-click-modal="false"
            title="对策管理"
            :visible.sync="dialogVisible2"
            width="900px">
          <el-button
                  size="small"
                  @click="showForm3('add')"
                  type="primary">
            新增对策
          </el-button>
          <div>
              <el-table
                      :data="tableData2"
                      border
                      style="width: 100%; margin-top: 20px">
                <el-table-column  align="center" label="对策名称" prop="solutionValue"></el-table-column>
                <el-table-column  align="center" label="排序" prop="sortOrder"></el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                  <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="mini"
                            @click="showForm3('edit',scope.row)">编辑
                    </el-button>
                    <el-button
                            type="text"
                            size="mini"
                            @click="delItem(scope.row,'solution')">{{scope.row.isShow == 1 ? '禁用' : '启用'}}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
    </el-dialog>
  </div>
</template>
<script>
    import {unOrderSolutions,editUnOrderSolutions} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import {validatePhone} from '@/utils/validate';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultForm  = {
      "type" : "reason",
      "reasonId" : '',
      "reasonValue" :'',
      "sortOrder" : 0,
      "isShow" : 1,
    };

    const defaultForm3  = {
      "type" : "solution",
      "reasonId" : '',
      "solutionId" : '',
      "solutionValue" : "",
      "sortOrder" : 0,
      "isShow" : 1
    };


    export default {
      name: "index",
      data(){
          const isvalidatePhone = (rule, value, callback) => {
              if(!validatePhone(value)){
                  callback(new Error('请输入正确的手机号'))
              } else {
                  callback()
              }
          };
          const isdiQuIds = (rule, value, callback) => {
            if(!this.diQuIds.length){
              callback(new Error('请选择所在地区'))
            } else {
              callback()
            }
          };
          return {
              tableData: [],
              count: 0,
              listLoading: false,

              roles:store.getters.roles ? store.getters.roles : [],
              dialogVisible:false,
              form:JSON.parse(JSON.stringify(defaultForm)),
              rules:{
                reasonValue:[{required: true, message: '请输入未成交原因', trigger: 'blur'}]

              },
              btnLoading:false,
              dialogType:'',

              dialogVisible3:false,
              form3:JSON.parse(JSON.stringify(defaultForm3)),
              rules3:{
                solutionValue:[{required: true, message: '请输入未成交对策', trigger: 'blur'},]
              },
              btnLoading3:false,
              dialogType2:'',


            dialogVisible2:false,
            tableData2: [],
            cutReasonId:'',
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
          isCanAllProductLine(){
              if(this.roles.indexOf("allProductLine") != -1){
                  return true
              }else{
                  return false
              }
          },
      },
      created() {
        this.getList();
      },
      filters: {
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
        fiflist(list){
          let array = [];
          if(list){
            list.forEach((el)=>{
              array.push(el.solutionValue)
            });
            return array.join(",")
          }else{
            return ''
          }
        },
      },
      methods: {
        //显示新建编辑原因弹窗
        showForm(type,item){
              this.dialogVisible = true;
              this.dialogType = type;
              if(type == 'add'){ //新增
                  this.form = JSON.parse(JSON.stringify(defaultForm));
                  setTimeout(()=>{
                    this.$refs.form.clearValidate();
                  },100)
              }else{ //编辑
                  this.form.type = 'reason';
                  this.form.reasonId = item.reasonId;
                  this.form.reasonValue = item.reasonValue;
                  this.form.sortOrder = item.sortOrder;
                  this.form.isShow = item.isShow;
              }
          },

          //关闭新建编辑原因弹窗之前
          beforeClose(){
              this.$refs.form.clearValidate();
              this.dialogVisible = false;

          },

          //关闭新建编辑原因弹窗
          handleClose(){
              this.$refs.form.clearValidate();
              this.dialogVisible = false;

          },

          //提交新建编辑原因
          handleConfirm(){
              this.$refs.form.validate((valid) => {
                  if (valid) {
                      this.btnLoading = true;
                      let data = JSON.parse(JSON.stringify(this.form));
                      editUnOrderSolutions(data).then(()=>{
                          this.btnLoading = false;
                          this.handleClose();
                          this.getList();
                      }).catch(()=>{
                          this.btnLoading = false;
                      })
                  }
                })
          },

        //显示对策管理
        showForm2(item){
          this.dialogVisible2 = true;
          this.tableData2 = JSON.parse(JSON.stringify(item.children));
          this.cutReasonId = item.reasonId;
        },

        //显示新建编辑对策弹窗
        showForm3(type,item){
          this.dialogVisible3 = true;
          this.dialogType2 = type;
          if(type == 'add'){ //新增
            this.form3 = JSON.parse(JSON.stringify(defaultForm3));
            this.form3.reasonId = this.cutReasonId;
            console.log("this.form3",this.form3)
            setTimeout(()=>{
              this.$refs.form3.clearValidate();
            },100)
          }else{ //编辑
            this.form3.type = 'solution';
            this.form3.reasonId = this.cutReasonId;
            this.form3.solutionId = item.solutionId;
            this.form3.solutionValue = item.solutionValue;
            this.form3.sortOrder = item.sortOrder;
            this.form3.isShow = item.isShow;
          }
        },

        //关闭对策弹窗
        handleClose3(){
          this.dialogVisible3 = false;
          this.btnLoading3 = false;
          this.form3 = JSON.parse(JSON.stringify(defaultForm3));
        },

        //确认对策
        handleConfirm3(){
          this.$refs.form3.validate((valid) => {
            if (valid) {
              this.btnLoading3 = true;
              let data = JSON.parse(JSON.stringify(this.form3));
              editUnOrderSolutions(data).then((res)=>{
                this.btnLoading3 = false;
                this.handleClose3();
                this.getList().then(()=>{
                  let cut = this.tableData.find((el)=>{
                    return el.reasonId == this.cutReasonId;
                  });
                  this.tableData2 = JSON.parse(JSON.stringify(cut.children));
                });

              }).catch(()=>{
                this.btnLoading3 = false;
              })
            }
          })
        },

        //获取客户未成原因及对策列表
        getList() {
          this.listLoading = true;
          return unOrderSolutions().then(response => {
              this.tableData = response;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            });
        },

        //禁用启用原因
        delItem(item,type){
          this.$confirm('确认此操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let data = {}
            if(type == 'reason'){
              data.type  =  "reason";
              data.reasonId  = item.reasonId;
              data.reasonValue = item.reasonValue;
              data.sortOrder = item.sortOrder;
              data.isShow = item.isShow == 1 ? 0 :1;
            }else if(type == 'solution'){
              data.type  =  "solution";
              data.reasonId  = this.cutReasonId;
              data.solutionId = item.solutionId;
              data.solutionValue = item.solutionValue;
              data.sortOrder = item.sortOrder;
              data.isShow = item.isShow == 1 ? 0 :1;
            }
            editUnOrderSolutions(data).then((res)=>{
              this.$message({
                type: 'success',
                message: '操作成工!'
              });
              this.getList().then(()=>{
                let cut = this.tableData.find((el)=>{
                  return el.reasonId == this.cutReasonId;
                });
                this.tableData2 = JSON.parse(JSON.stringify(cut.children));
              });
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        },
      },
    }
</script>

<style scoped lang="scss">

</style>
